<template>
  <div class="ranking-page">
    <!-- 左侧导航栏 -->
    <aside class="left-sidebar">
      <h1 class="sidebar-title">榜单导航</h1>

      <el-menu
        ref="menuRef"
        :default-active="activeMenu"
        :default-openeds="[selectedType]"
        class="ranking-menu"
        @select="handleMenuSelect"
        @open="handleMenuOpen"
      >
        <!-- 文章榜 -->
        <el-sub-menu index="article">
          <template #title>
            <el-icon><Document /></el-icon>
            <span>文章榜</span>
          </template>
          <el-menu-item index="article-overall">
            <el-icon><TrendCharts /></el-icon>
            <span>综合</span>
          </el-menu-item>
          <el-menu-item
            v-for="category in categories"
            :key="'article-' + category.id"
            :index="'article-' + category.id"
          >
            <el-icon><Folder /></el-icon>
            <span>{{ category.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 作者榜 -->
        <el-sub-menu index="author">
          <template #title>
            <el-icon><User /></el-icon>
            <span>作者榜</span>
          </template>
          <el-menu-item index="author-overall">
            <el-icon><TrendCharts /></el-icon>
            <span>综合</span>
          </el-menu-item>
          <el-menu-item
            v-for="category in categories"
            :key="'author-' + category.id"
            :index="'author-' + category.id"
          >
            <el-icon><Folder /></el-icon>
            <span>{{ category.name }}</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 收藏榜 -->
        <el-sub-menu index="collection">
          <template #title>
            <el-icon><Star /></el-icon>
            <span>收藏榜</span>
          </template>
          <el-menu-item index="collection-overall">
            <el-icon><TrendCharts /></el-icon>
            <span>综合</span>
          </el-menu-item>
          <el-menu-item
            v-for="category in categories"
            :key="'collection-' + category.id"
            :index="'collection-' + category.id"
          >
            <el-icon><Folder /></el-icon>
            <span>{{ category.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </aside>

    <!-- 右侧主内容区 -->
    <main class="main-content">
      <h2 class="content-title">
        {{ getRankingTypeName(selectedType) }}·{{
          getDimensionName(selectedDimension)
        }}
        <span
          v-if="selectedDimension === 'category' && selectedCategoryName"
          class="category-tag"
        >
          · {{ selectedCategoryName }}
        </span>
      </h2>

      <div v-loading="loading" class="content-body">
        <div v-if="rankingData.length === 0" class="empty-state">
          <p>暂无榜单数据</p>
        </div>

        <ol v-else class="ranking-list">
          <li
            v-for="item in rankingData"
            :key="item.targetId"
            class="ranking-item"
          >
            <div class="item-left" @click="handleItemClick(item)">
              <!-- 文章榜/收藏榜布局 -->
              <template
                v-if="
                  selectedType === 'article' || selectedType === 'collection'
                "
              >
                <div class="item-header">
                  <span class="item-rank">{{ item.rank }}</span>
                  <h3 class="item-title">{{ item.title }}</h3>
                </div>
                <div class="item-meta">
                  <span
                    v-if="item.authorAvatar"
                    class="author-info"
                    @click.stop="handleAuthorClick(item)"
                  >
                    <el-avatar
                      :size="20"
                      :src="formatAvatarUrl(item.authorAvatar)"
                      :alt="item.subtitle"
                      fit="cover"
                      class="author-avatar"
                    >
                      <template #default>
                        <el-icon><User /></el-icon>
                      </template>
                    </el-avatar>
                    <span class="author-name">{{ item.subtitle }}</span>
                  </span>
                  <span class="item-stats">
                    <span class="stat-item">
                      <span class="stat-number">{{
                        formatNumber(item.viewCount || 0)
                      }}</span>
                      <span class="stat-label">浏览</span>
                    </span>
                    <span class="stat-separator">·</span>
                    <span class="stat-item">
                      <span class="stat-number">{{
                        formatNumber(
                          (item.likeCount || 0) + (item.commentCount || 0)
                        )
                      }}</span>
                      <span class="stat-label">互动</span>
                    </span>
                    <span class="stat-separator">·</span>
                    <span class="stat-item">
                      <span class="stat-number">{{
                        formatNumber(item.collectCount || 0)
                      }}</span>
                      <span class="stat-label">收藏</span>
                    </span>
                  </span>
                </div>
              </template>

              <!-- 作者榜布局 -->
              <template v-if="selectedType === 'author'">
                <div class="author-container">
                  <span class="item-rank">{{ item.rank }}</span>
                  <el-avatar
                    v-if="item.avatar"
                    :size="48"
                    :src="formatAvatarUrl(item.avatar)"
                    :alt="item.title"
                    fit="cover"
                    class="author-avatar-large"
                    @click.stop="handleAuthorClick(item)"
                  >
                    <template #default>
                      <el-icon><User /></el-icon>
                    </template>
                  </el-avatar>
                  <div class="author-content">
                    <h3
                      class="author-title"
                      @click.stop="handleAuthorClick(item)"
                    >
                      {{ item.title }}
                    </h3>
                    <span class="item-stats">
                      <span class="stat-item">
                        <span class="stat-number">{{
                          formatNumber(item.articleCount || 0)
                        }}</span>
                        <span class="stat-label">文章</span>
                      </span>
                      <span class="stat-separator">·</span>
                      <span class="stat-item">
                        <span class="stat-number">{{
                          formatNumber(item.likeCount || 0)
                        }}</span>
                        <span class="stat-label">获赞</span>
                      </span>
                      <span class="stat-separator">·</span>
                      <span class="stat-item">
                        <span class="stat-number">{{
                          formatNumber(item.collectCount || 0)
                        }}</span>
                        <span class="stat-label">获收藏</span>
                      </span>
                      <span class="stat-separator">·</span>
                      <span class="stat-item">
                        <span class="stat-number">{{
                          formatNumber(item.fansCount || 0)
                        }}</span>
                        <span class="stat-label">粉丝</span>
                      </span>
                    </span>
                  </div>
                </div>
              </template>
            </div>

            <div class="item-right">
              <!-- 热度显示 -->
              <div class="heat-display">
                <!-- 前三名显示火焰图标 -->
                <svg
                  v-if="item.rank <= 3"
                  class="heat-icon"
                  viewBox="0 0 1024 1024"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M431.542857 902.095238S146.285714 860.647619 146.285714 616.838095 519.314286 351.085714 436.419048 48.761905c0 0 277.942857 87.771429 209.67619 360.838095 0 0 36.571429-24.380952 65.828572-70.704762 0 0 141.409524 109.714286 141.409523 275.504762C853.333333 780.190476 658.285714 902.095238 565.638095 902.095238c0 0 99.961905-136.533333 9.752381-221.866667-129.219048-124.342857-73.142857-202.361905-73.142857-202.361904s-316.952381 153.6-70.704762 424.228571"
                    fill="#FF2323"
                  />
                </svg>
                <span class="heat-value">{{
                  formatNumber(item.heatScore)
                }}</span>
                <span class="heat-label">热度</span>
              </div>

              <span class="divider">|</span>

              <!-- 文章榜/收藏榜显示收藏按钮 -->
              <el-button
                v-if="
                  selectedType === 'article' || selectedType === 'collection'
                "
                :type="isCollected(item) ? 'warning' : 'default'"
                size="default"
                class="action-button"
                @click.stop="handleCollect(item)"
              >
                <span>{{ isCollected(item) ? "已收藏" : "收藏" }}</span>
              </el-button>

              <!-- 作者榜显示关注按钮 -->
              <el-button
                v-if="selectedType === 'author'"
                :type="isFollowed(item) ? 'success' : 'primary'"
                size="default"
                class="action-button"
                @click.stop="handleFollow(item)"
              >
                <span>{{ isFollowed(item) ? "已关注" : "关注" }}</span>
              </el-button>
            </div>
          </li>
        </ol>
      </div>

      <!-- 分页 -->
      <div v-if="total > pageSize" class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          background
          @current-change="handlePageChange"
        />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Document,
  User,
  Star,
  TrendCharts,
  Folder,
  View,
  Promotion
} from "@element-plus/icons-vue";
import { formatAvatarUrl } from "@/utils/avatar";
import { collectUserArticleApi } from "@/api/user-article";
import { followUserApi } from "@/api/user-profile";
import { useUserAuthStore } from "@/store/modules/userAuth";
import {
  getArticleOverallRanking,
  getArticleCategoryRanking,
  getAuthorOverallRanking,
  getAuthorCategoryRanking,
  getCollectionOverallRanking,
  getCollectionCategoryRanking,
  type RankingItem,
  type RankingType
} from "@/api/ranking";
import { getCategories, type Category } from "@/api/home";

const router = useRouter();
const userAuthStore = useUserAuthStore();

// 菜单ref
const menuRef = ref();

// 榜单类型配置
const rankingTypes = [
  {
    value: "article" as RankingType,
    label: "文章榜",
    icon: "el-icon-document"
  },
  { value: "author" as RankingType, label: "作者榜", icon: "el-icon-user" },
  {
    value: "collection" as RankingType,
    label: "收藏榜",
    icon: "el-icon-star-off"
  }
];

// 维度配置
const dimensions = [
  { value: "overall", label: "综合榜" },
  { value: "category", label: "分类榜" }
];

// 状态管理
const selectedType = ref<RankingType>("article");
const selectedDimension = ref<"overall" | "category">("overall");
const selectedCategoryId = ref<number | undefined>(undefined);
const categories = ref<Category[]>([]);
const rankingData = ref<RankingItem[]>([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);

// 当前激活的菜单项
const activeMenu = computed(() => {
  if (selectedDimension.value === "overall") {
    return `${selectedType.value}-overall`;
  } else {
    return `${selectedType.value}-${selectedCategoryId.value}`;
  }
});

// 加载分类列表
const loadCategories = async () => {
  try {
    const response = await getCategories();
    categories.value = (response.data as any)?.data || response.data || [];
    if (categories.value.length > 0) {
      selectedCategoryId.value = categories.value[0].id;
    }
  } catch (error) {
    console.error("加载分类失败:", error);
  }
};

// 加载榜单数据
const loadRankingData = async () => {
  loading.value = true;
  try {
    let response;

    // 根据榜单类型和维度选择对应的API
    if (selectedType.value === "article") {
      if (selectedDimension.value === "overall") {
        response = await getArticleOverallRanking(
          currentPage.value,
          pageSize.value
        );
      } else if (selectedCategoryId.value) {
        response = await getArticleCategoryRanking(
          selectedCategoryId.value,
          currentPage.value,
          pageSize.value
        );
      }
    } else if (selectedType.value === "author") {
      if (selectedDimension.value === "overall") {
        response = await getAuthorOverallRanking(
          currentPage.value,
          pageSize.value
        );
      } else if (selectedCategoryId.value) {
        response = await getAuthorCategoryRanking(
          selectedCategoryId.value,
          currentPage.value,
          pageSize.value
        );
      }
    } else if (selectedType.value === "collection") {
      if (selectedDimension.value === "overall") {
        response = await getCollectionOverallRanking(
          currentPage.value,
          pageSize.value
        );
      } else if (selectedCategoryId.value) {
        response = await getCollectionCategoryRanking(
          selectedCategoryId.value,
          currentPage.value,
          pageSize.value
        );
      }
    }

    if (response?.data) {
      rankingData.value = response.data.records || [];
      total.value = Math.min(rankingData.value.length, 50); // 榜单最多50条
    }
  } catch (error) {
    console.error("加载榜单数据失败:", error);
    ElMessage.error("加载榜单数据失败");
    rankingData.value = [];
  } finally {
    loading.value = false;
  }
};

// 切换榜单类型
const changeRankingType = (type: RankingType) => {
  selectedType.value = type;
  currentPage.value = 1;
  loadRankingData();
};

// 切换维度
const changeDimension = (dimension: "overall" | "category") => {
  selectedDimension.value = dimension;
  currentPage.value = 1;
  if (
    dimension === "category" &&
    !selectedCategoryId.value &&
    categories.value.length > 0
  ) {
    selectedCategoryId.value = categories.value[0].id;
  }
  loadRankingData();
};

// 处理菜单展开
const handleMenuOpen = (index: string) => {
  // 当打开一个榜单菜单时，关闭其他榜单菜单
  const allMenus = ["article", "author", "collection"];
  allMenus.forEach(menu => {
    if (menu !== index && menuRef.value) {
      menuRef.value.close(menu);
    }
  });
};

// 处理菜单选择
const handleMenuSelect = (index: string) => {
  const parts = index.split("-");
  const type = parts[0] as RankingType;
  const dimensionOrId = parts[1];

  selectedType.value = type;

  if (dimensionOrId === "overall") {
    selectedDimension.value = "overall";
    selectedCategoryId.value = undefined;
  } else {
    selectedDimension.value = "category";
    selectedCategoryId.value = parseInt(dimensionOrId);
  }

  currentPage.value = 1;

  // 更新URL参数以保持状态（使用history.replaceState避免页面重新加载）
  const query = new URLSearchParams();
  query.set("type", selectedType.value);
  query.set("dimension", selectedDimension.value);

  if (selectedDimension.value === "category" && selectedCategoryId.value) {
    query.set("categoryId", selectedCategoryId.value.toString());
  }

  const newUrl = `${window.location.pathname}?${query.toString()}`;
  window.history.replaceState({}, "", newUrl);

  loadRankingData();
};

// 获取当前选中的分类名称
const selectedCategoryName = computed(() => {
  if (!selectedCategoryId.value) return "";
  const category = categories.value.find(
    c => c.id === selectedCategoryId.value
  );
  return category?.name || "";
});

// 处理项目点击
const handleItemClick = (item: any) => {
  if (selectedType.value === "article" || selectedType.value === "collection") {
    viewArticle(item.targetId);
  } else if (selectedType.value === "author") {
    viewAuthor(item.targetId);
  }
};

// 获取排行榜类型名称
const getRankingTypeName = (type: RankingType) => {
  const typeMap: Record<string, string> = {
    article: "文章榜",
    author: "作者榜",
    collection: "收藏榜"
  };
  return typeMap[type] || type;
};

// 获取维度名称
const getDimensionName = (dimension: string) => {
  const dimensionMap: Record<string, string> = {
    overall: "综合",
    category: "分类"
  };
  return dimensionMap[dimension] || dimension;
};

// 分页处理
const handlePageChange = (page: number) => {
  currentPage.value = page;
  loadRankingData();
};

// 查看文章
const viewArticle = (articleId: number, event?: Event) => {
  // 阻止默认行为和事件冒泡
  if (event) {
    event.preventDefault();
    event.stopPropagation();
  }

  console.log("🔗 点击排行榜文章，准备在新标签页打开:", articleId);

  // 以新标签页打开文章详情，符合主流论坛交互习惯
  const route = router.resolve(`/user/article/${articleId}`);
  // 使用完整URL，确保 Hash 模式路由正确解析
  const fullUrl =
    window.location.origin + window.location.pathname + route.href;
  console.log("🔗 完整URL:", fullUrl);

  const newWindow = window.open(fullUrl, "_blank");

  if (!newWindow) {
    console.warn("⚠️ 浏览器阻止了弹出窗口，尝试使用 router.push");
    router.push(`/user/article/${articleId}`);
  } else {
    console.log("✅ 成功在新标签页打开排行榜文章");
  }
};

// 查看作者
const viewAuthor = (authorId: number) => {
  router.push(`/user/profile/${authorId}`);
};

// 处理作者点击
const handleAuthorClick = (item: RankingItem) => {
  const authorId = item.authorId;
  if (authorId) {
    router.push(`/user/profile/${authorId}`);
  } else {
    ElMessage.warning("作者信息不存在");
  }
};

// 查看收藏集
const viewCollection = (collectionId: number) => {
  // TODO: 实现收藏集详情页路由
  ElMessage.info("收藏集详情页功能开发中");
};

// 获取排名样式类
const getRankClass = (rank: number) => {
  if (rank === 1) return "rank-first";
  if (rank === 2) return "rank-second";
  if (rank === 3) return "rank-third";
  return "";
};

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + "w";
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + "k";
  }
  return num.toString();
};

// 判断是否已收藏
const isCollected = (item: RankingItem) => {
  return item.isCollected === true;
};

// 判断是否已关注
const isFollowed = (item: RankingItem) => {
  return item.isFollowed === true;
};

// 处理收藏
const handleCollect = async (item: RankingItem) => {
  // 检查用户是否已登录
  if (!userAuthStore.isLoggedIn) {
    ElMessage.warning("请先登录后再进行收藏操作");
    router.push("/user/login");
    return;
  }

  const articleId = item.targetId;
  const currentStatus = item.isCollected;
  const newCollectState = !currentStatus;

  try {
    const response = await collectUserArticleApi(articleId, newCollectState);

    if (response.code === 200) {
      // 更新本地状态
      item.isCollected = newCollectState;
      if (item.collectCount !== undefined) {
        item.collectCount += newCollectState ? 1 : -1;
      }
      ElMessage.success(newCollectState ? "收藏成功" : "取消收藏成功");
    } else {
      ElMessage.error(response.message || "操作失败");
    }
  } catch (error) {
    console.error("收藏操作失败:", error);
    ElMessage.error("操作失败，请稍后重试");
  }
};

// 处理关注
const handleFollow = async (item: RankingItem) => {
  // 检查用户是否已登录
  if (!userAuthStore.isLoggedIn) {
    ElMessage.warning("请先登录后再进行关注操作");
    router.push("/user/login");
    return;
  }

  const authorId = item.targetId;
  const currentStatus = item.isFollowed;
  const newFollowState = !currentStatus;

  try {
    const response = await followUserApi({
      userId: authorId,
      isFollow: newFollowState
    });

    if (response.code === 200) {
      // 更新本地状态
      item.isFollowed = newFollowState;
      if (item.fansCount !== undefined) {
        item.fansCount += newFollowState ? 1 : -1;
      }
      ElMessage.success(newFollowState ? "关注成功" : "取消关注成功");
    } else {
      ElMessage.error(response.message || "操作失败");
    }
  } catch (error) {
    console.error("关注操作失败:", error);
    ElMessage.error("操作失败，请稍后重试");
  }
};

// 初始化
onMounted(async () => {
  // 处理URL查询参数
  const route = router.currentRoute.value;
  const queryType = route.query.type as RankingType | undefined;
  const queryDimension = route.query.dimension as
    | "overall"
    | "category"
    | undefined;
  const queryCategoryId = route.query.categoryId as string | undefined;

  // 设置榜单类型
  if (queryType && ["article", "author", "collection"].includes(queryType)) {
    selectedType.value = queryType;
  }

  // 设置维度
  if (queryDimension && ["overall", "category"].includes(queryDimension)) {
    selectedDimension.value = queryDimension;
  }

  // 加载分类数据
  await loadCategories();

  // 设置分类ID（必须在loadCategories之后）
  if (queryCategoryId && selectedDimension.value === "category") {
    const categoryId = parseInt(queryCategoryId);
    if (!isNaN(categoryId)) {
      selectedCategoryId.value = categoryId;
    }
  }

  // 加载榜单数据
  await loadRankingData();
});
</script>

<style scoped lang="scss">
.ranking-page {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  min-height: calc(100vh - 140px);
  padding: 40px 20px;
  margin: 0 auto;
  background: #f4f5f5;

  // 响应式设计
  @media (width <= 768px) {
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px;

    .left-sidebar {
      width: 100%;

      .sidebar-title {
        margin-bottom: 24px;
        font-size: 24px;
      }

      .nav-section {
        margin-bottom: 24px;

        .nav-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;

          .nav-item {
            margin-bottom: 0;
          }
        }
      }
    }

    .main-content {
      .content-title {
        margin-bottom: 24px;
        font-size: 20px;
      }

      .content-body .ranking-list .ranking-item {
        .item-header .item-title {
          font-size: 16px;
        }

        .item-meta {
          flex-wrap: wrap;
          margin-left: 0;
          font-size: 13px;
        }
      }
    }
  }

  // 左侧导航栏
  .left-sidebar {
    flex-shrink: 0;
    width: 240px;
    height: fit-content;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);

    .sidebar-title {
      display: flex;
      gap: 8px;
      align-items: center;
      padding-bottom: 0;
      margin-bottom: 24px;
      font-size: 22px;
      font-weight: 700;
      color: #252933;
      border-bottom: none;

      &::after {
        display: inline-block;
        padding: 2px 8px;
        font-size: 11px;
        font-weight: 600;
        color: white;
        content: "HOT";
        background: linear-gradient(135deg, #1e80ff 0%, #1890ff 100%);
        border-radius: 4px;
        transform: translateY(-2px);
      }
    }

    .ranking-menu {
      background: transparent;
      border-right: none;

      :deep(.el-sub-menu__title) {
        height: 44px;
        padding-left: 12px !important;
        margin-bottom: 4px;
        line-height: 44px;
        border-radius: 8px;

        &:hover {
          background: #f7f8fa;
        }
      }

      :deep(.el-menu-item) {
        height: 40px;
        padding-left: 48px !important;
        margin-bottom: 2px;
        line-height: 40px;
        border-radius: 8px;

        &:hover {
          background: #f7f8fa;
        }

        &.is-active {
          font-weight: 500;
          color: #1e80ff;
          background: #e8f3ff;
        }
      }
    }
  }

  // 右侧主内容区
  .main-content {
    flex: 1;
    min-width: 0;
    padding: 32px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);

    .content-title {
      padding-bottom: 0;
      margin-bottom: 24px;
      font-size: 20px;
      font-weight: 600;
      color: #252933;
      border-bottom: none;

      .category-tag {
        font-size: 16px;
        font-weight: 400;
        color: #8a919f;
      }
    }

    .content-body {
      min-height: 500px;

      .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 400px;
        font-size: 16px;
        color: #999;
      }

      .ranking-list {
        padding: 0;
        margin: 0;
        list-style: none;
        counter-reset: ranking-counter;

        .ranking-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 18px 0;
          border-bottom: 1px solid #e5e6eb;
          transition: all 0.2s ease;

          &:hover {
            padding-right: 16px;
            padding-left: 16px;
            margin-right: -16px;
            margin-left: -16px;
            background: #f7f8fa;
            border-radius: 8px;

            .item-title {
              color: #1e80ff;
            }
          }

          &:last-child {
            border-bottom: none;
          }

          &:first-child {
            padding-top: 0;
          }

          .item-left {
            flex: 1;
            min-width: 0;
            cursor: pointer;
          }

          .item-header {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            margin-bottom: 10px;

            .item-rank {
              flex-shrink: 0;
              min-width: 24px;
              font-size: 16px;
              font-weight: 600;
              line-height: 1.5;
              color: #c2c8d1;
              text-align: left;
            }

            .item-title {
              display: -webkit-box;
              margin: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              font-size: 15px;
              font-weight: 500;
              line-height: 1.6;
              color: #252933;
              transition: color 0.2s ease;
              -webkit-box-orient: vertical;
            }
          }

          // 前三名特殊颜色
          &:nth-child(1) .item-rank {
            font-size: 18px;
            font-weight: 700;
            color: #ff4d4f;
          }

          &:nth-child(2) .item-rank {
            font-size: 17px;
            font-weight: 700;
            color: #ff7a45;
          }

          &:nth-child(3) .item-rank {
            font-size: 17px;
            font-weight: 700;
            color: #ffc53d;
          }

          .item-meta {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-left: 36px;
            font-size: 13px;
            color: #8a919f;

            .author-info {
              display: flex;
              gap: 6px;
              align-items: center;
              cursor: pointer;
              transition: opacity 0.2s ease;

              &:hover {
                opacity: 0.7;
              }

              .author-avatar {
                flex-shrink: 0;
                width: 20px;
                height: 20px;
              }

              .author-name {
                font-size: 13px;
                color: #8a919f;
              }
            }

            .item-stats {
              display: flex;
              gap: 4px;
              align-items: center;
              font-size: 13px;
              color: #8a919f;

              .stat-item {
                display: flex;
                gap: 2px;
                align-items: center;
                white-space: nowrap;

                .stat-number {
                  font-weight: 500;
                  color: #8a919f;
                }

                .stat-label {
                  color: #8a919f;
                }
              }

              .stat-separator {
                margin: 0 4px;
                color: #d4d7de;
              }
            }
          }

          // 作者榜专属样式
          .author-container {
            display: flex;
            gap: 16px;
            align-items: flex-start;

            .item-rank {
              flex-shrink: 0;
              min-width: 32px;
              font-size: 18px;
              font-weight: 700;
              line-height: 1.5;
              color: #999;
              text-align: center;
            }

            .author-avatar-large {
              flex-shrink: 0;
              margin-top: 2px;
              cursor: pointer;
              transition: opacity 0.2s ease;

              &:hover {
                opacity: 0.8;
              }
            }

            .author-content {
              display: flex;
              flex: 1;
              flex-direction: column;
              gap: 8px;
              min-width: 0;

              .author-title {
                margin: 0;
                font-size: 17px;
                font-weight: 600;
                line-height: 1.5;
                color: #1d2129;
                cursor: pointer;
                transition: color 0.2s ease;

                &:hover {
                  color: #409eff;
                }
              }

              .item-stats {
                display: flex;
                gap: 2px;
                align-items: center;
                font-size: 13px;
                color: #8a919f;

                .stat-item {
                  display: flex;
                  gap: 2px;
                  align-items: center;

                  .stat-number {
                    color: #8a919f;
                  }

                  .stat-label {
                    color: #8a919f;
                  }
                }

                .stat-separator {
                  margin: 0 2px;
                  color: #d9d9d9;
                }
              }
            }
          }

          .item-right {
            display: flex;
            flex-shrink: 0;
            gap: 16px;
            align-items: center;

            .heat-display {
              display: flex;
              flex-shrink: 0;
              gap: 4px;
              align-items: center;
              white-space: nowrap;

              .heat-icon {
                flex-shrink: 0;
                width: 16px;
                height: 16px;
                color: #ff4d4f;
              }

              .heat-value {
                flex-shrink: 0;
                font-size: 18px;
                font-weight: 600;
                color: #252933;
              }

              .heat-label {
                flex-shrink: 0;
                margin-left: 2px;
                font-size: 13px;
                color: #8a919f;
              }
            }

            .divider {
              display: none;
            }

            .action-button {
              min-width: 72px;
              height: 32px;
              padding: 0 16px;
              font-size: 14px;
              font-weight: 500;
              text-align: center;
              border-radius: 4px;
              transition: all 0.2s ease;

              &:hover {
                opacity: 0.9;
                transform: none;
              }

              &:active {
                transform: scale(0.98);
              }

              &.el-button--default {
                color: #1e80ff;
                background: #f0f8ff;
                border-color: #d6ebff;

                &:hover {
                  background: #e6f4ff;
                  border-color: #bddeff;
                }
              }

              &.el-button--warning {
                color: #fa8c16;
                background: #fff7e6;
                border-color: #ffd591;

                &:hover {
                  background: #ffe7ba;
                  border-color: #ffc069;
                }
              }

              &.el-button--success,
              &.el-button--primary {
                &:hover {
                  opacity: 0.9;
                }
              }
            }
          }
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      padding-top: 20px;
      margin-top: 40px;
    }
  }
}
</style>
